class Col extends HTMLElement {
    constructor() {
        super();

        const template = document.createElement("template");

        template.innerHTML = `
            <style>
                :host {
                    display: inline-block;
                    box-sizing: border-box;
                }
                .cp-col {
                    display: block;
                    line-height: 34px;
                    width: 100%;
                    box-sizing: border-box;
                }
            </style>

            <div class="cp-col"><slot></slot></div>
        `;

        this._shadowRoot = this.attachShadow({
            mode: "open"
        });
        this._shadowRoot.appendChild(template.content.cloneNode(true));

        this.$col = this._shadowRoot.querySelector(".cp-col");
    }

    static get observedAttributes() {
        return ["span", "offset"];
    }

    get span() {
        return this.getAttribute("span");
    }

    set span(value) {
        this.setAttribute("span", value);
    }

    get offset() {
        return this.getAttribute("offset");
    }

    set offset(value) {
        this.setAttribute("offset", value);
    }

    connectedCallback() {
        this.$parent = this.parentNode;
        this.$parentTag = this.$parent.tagName;
        if (this.$parentTag === "CP-ROW") {
            const domRect = this.$parent.getBoundingClientRect();
            const width = domRect.width;
            const gutter = this.$parent.getAttribute("gutter");
            if (this.offset) {
                const offsetWidth = (width / 24) * this.offset;
                this.style.marginLeft = `${offsetWidth}px`;
            }
            if (this.span) {
                const w = (width / 24) * this.span;
                this.style.width = `${w}px`;
            }
            if (gutter !== null) {
                const w = this.getBoundingClientRect().width;
                this.style.padding = `0 ${gutter / 2}px`;
            }
        }
    }

    attributeChangedCallback(name, oldVal, newVal) {
        this.render(name);
    }
    render(name) {}
}

if (!customElements.get("cp-col")) {
    customElements.define("cp-col", Col);
}
